<template>
	<div id="app">
		<v-app>
			<div>
				<!--警告信息提示-->
				<v-app-bar app color="#FF5252">
					<v-list-item-title style="text-align: center;font-size:18px;color:white">我要出租</v-list-item-title>
				</v-app-bar>
			</div>
			<div style="width: 90%;margin: 0 auto;">
				<div style="padding-top: 5%;">
					<icon name="warn" scale="2"></icon><span style="margin-left: 3%;">请把您要出租的房源信息填充完整哦！</span>
				</div>
				<div style="padding-top: 1vh;">
					<icon name="house" scale="2"></icon><span style="margin-left:2% ;font-size: 17px;">房屋信息</span>
				</div>

				<v-divider></v-divider>
				<v-form ref="form" v-model="valid" lazy-validation>
					<!-- 需要地区 -->
					<!-- 					<v-text-field v-model="name" :rules="nameRules" label="您的姓名" required></v-text-field>
					<v-text-field v-model="phone" :rules="phoneRules" label="手机号码" required></v-text-field> -->
					<v-text-field v-model="house_title" validate-on-blur :rules="[rules.titleRules]" label="*房屋标题" placeholder=""></v-text-field>
					<v-text-field v-model="house_address" validate-on-blur :rules="[rules.addressRules]" label="*房屋地址" placeholder=""></v-text-field>
					<v-text-field v-model="house_rent" validate-on-blur :rules="[rules.moneyRules]" label="*意向租金(元/月)" placeholder=""></v-text-field>
					<v-text-field v-model="acreage" validate-on-blur :rules="[rules.acreageRules]" label="*房屋面积(m²)" placeholder=""></v-text-field>
					<v-text-field v-model="house_position" validate-on-blur label="方位朝向" placeholder=""></v-text-field>
					<v-text-field v-model="build_date" validate-on-blur label="建造时间" placeholder=""></v-text-field>
					<!-- <v-text-field v-model="house_renovation"  label="装修程度" required></v-text-field> -->
					<v-select v-model="house_renovation" :items="house_renovation_list" label="*装修程度" :rules="[renovation_check=> !!renovation_check || '']" required></v-select>
					<v-select v-model="house_type" :items="house_type_item" :rules="[house_check=> !!house_check || '']" label="*户型" required></v-select>
					<v-select v-model="lease_type" :items="lease_type_item" :rules="[lease_check => !!lease_check || '']" label="*租房类型" required></v-select>
					<!-- <v-combobox v-model="service" :items="service_item" chips multiple label="*配置设施" :rules="[service_rule => !!service_rule || '']"></v-combobox> -->
					<v-menu v-model="menu" :close-on-content-click="false" :nudge-right="40" transition="scale-transition" offset-y
						min-width="290px">
						<template v-slot:activator="{ on }">
							<v-text-field v-model="date" label="*起租日期" readonly v-on="on" :rules="[date_check => !!date_check || '']"></v-text-field>
						</template>
						<v-date-picker v-model="date" @input="menu = false" :allowed-dates="allowedDates"></v-date-picker>
					</v-menu>
					<v-textarea outlined name="input-7-4" label="*房屋描述" v-model="textarea" :rules="[textarea_check => !!textarea_check || '']" counter="60" maxlength="60" style="font-size: 13px;color: grey;"></v-textarea>
					<el-cascader :props="props" style="width: 100%;" placeholder="*选择区域" v-model="partyOrganId" prefix-icon="el-icon-office-building"></el-cascader>
					<div style="padding-top: 3vh;">
						<icon name="service" scale="2"></icon><span style="margin-left:2% ;font-size: 17px;">配置信息</span>
					</div>
					<v-divider></v-divider>
					<el-checkbox-group v-model="check_service" style="padding-top: 1vh;text-align: center;">
						<el-checkbox v-for="service in service_item" :label="service.id" :key="service.id">{{service.name}}</el-checkbox>
					</el-checkbox-group>
					<div style="padding-top: 2vh;">
						<icon name="image" scale="2"></icon><span style="margin-left:2% ;font-size: 17px;">房屋图片</span>
					</div>
					<v-divider></v-divider>
					<div>
						<dl class="">
							<div class="" style="flex: 0 0 12.5%;max-width: 30%;"><dt>*上传图片:</dt> </div>
							<!-- {{--  上传合同 --}} -->
							<div class="uploadDIv">
								<span>+</span>
								<input type="file" name="file" @change="handleFile" />
							</div>
							<!-- {{-- 显示刚才选择的图片 --}} -->
						</dl>

					</div>
					<div class="clearfloat"></div>
					<div>
						<div style="position: absolute;right: 0;" v-show="delete_show" @click="clear_img()">					
							<icon name="delete_two" scale="2"></icon>
						</div>
						<div v-for="(image,i) in house_img_url" :key="i">
							<img :src="image.image_url" style="width:33%;height: 33%;float:left" />
						</div>
						<div class="clearfloat"></div>
						<!-- <div class="clear"></div> -->
					</div>
					<v-divider></v-divider>
					<v-checkbox v-model="check_agree" :rules="[check_agree => !!check_agree || '']" >
						<template v-slot:label>
							<div>
								我已阅读和同意
								<v-tooltip bottom>
									<template v-slot:activator="{ on }">
										<a href="javascript:void(0)" @click.stop>
											&lt;&lt;苦瓜房缘条例&gt;&gt;
										</a>
									</template>
								</v-tooltip>
							</div>
						</template>
					</v-checkbox>
					<v-btn block x-large color="#FF5252" :disabled="!valid" class="mr-4" @click="validate" style="font-size: 18px;color:white">
						发布
					</v-btn>
				</v-form>
			</div>
		</v-app>
		<v-snackbar v-model="snackbar" bottom :timeout="timeout">
			{{ message }}
		</v-snackbar>
	</div>
</template>

<script>
	import axios from "axios";

	export default {
		name: "Lease",
		data() {
			return {
				date: new Date().toISOString().substr(0, 10),
				// --提示框--
				snackbar:false,
				timeout:1000,
				message:'',
				// --------
				menu: '',
				check_agree: false,
				house_address: '',
				house_rent: '',
				service: '',
				valid: true,
				house_image: [],
				house_img_url: [],
				house_title: '',
				house_position: '',
				build_date: '',
				acreage: '',
				search: false,
				textarea: '',
				rules: {
					acreageRules: value => !!value || "",
					addressRules: value => !!value || "",
					moneyRules: value => !!value || "",
					titleRules: value => !!value || ""
				},
				house_type_item: ['小户型', '一居', '二居', '三居', '四居', '其他'],
				house_type:'',
				lease_type_item: ['单间', '合租', '套房', '其他'],
				lease_type:'',
				house_renovation_list: ['简装', '精装'],
				house_renovation:'',
				checkAll: false,
				check_service: [],
				service_item: [], // 所有的设备
				isIndeterminate: true,
				partyOrganId: [],
				delete_show:false,
				login: this.COMMON.goLogin,
				// 父主键向下传递给值给子组件
				props: {
					lazy: true,
					lazyLoad(node, resolve) {
						setTimeout(() => {
							if (node.level === 0) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/province", //请求地址
										params: {}
									})
									.then(res => {
										const province = res.data.data.map(value => ({
											value: value.pid,
											label: value.name,
											leaf: node.level >= 2
										}));
										resolve(province);
									})
									.catch(err => {
										console.log(err);
									});
							}
							if (node.level === 1) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/city", //请求地址
										params: {
											pid: node.value
										}
									})
									.then(res => {
										console.log(res.data);
										const city = res.data.data.map(value => ({
											value: value.cid,
											label: value.cname,
											leaf: node.level >= 2
										}));
										// 通过调用resolve将子节点数据返回，通知组件数据加载完成
										resolve(city);
									})
									.catch(err => {
										console.log(err);
									});
							}
							if (node.level === 2) {
								axios({
										method: "get", //请求方式
										url: "/api/v1.0/area", //请求地址
										params: {
											cid: node.path[1]
										}
									})
									.then(res => {
										const area = res.data.data.map(value => ({
											value: value.aid,
											label: value.aname,
											leaf: node.level >= 2
										}));
										// 通过调用resolve将子节点数据返回，通知组件数据加载完成
										resolve(area);
									})
									.catch(err => {
										console.log(err);
									});
							}
						}, 500);
					}
				}
			}
		},
		methods: {
			allowedDates:val => Date.parse(val) > Date.now() - 8.64e7,
			validate() {
				if (this.$refs.form.validate()) {
					if(this.house_img_url.length == 0){
						this.snackbar = true;
						this.message = '请上传您的房屋图片';
						return;
					}
					if(this.partyOrganId.length == 0){
						this.snackbar = true;
						this.message = '请选择房屋所在区域';
						return;
					}
					if(this.check_service.length == 0){
						this.snackbar = true;
						this.message = '请勾选您房屋的配置信息';
						return;
					}
					let _this = this;
					axios
						.post("/api/v1.0/house/info", {
							title: _this.house_title,
							area_id: _this.partyOrganId.slice(-1),
							house_rent:_this.house_rent,
							address:_this.house_address,
							acreage:_this.acreage,
							house_type:_this.house_type,
							lease_type:_this.lease_type,
							position:_this.house_position,
							build_date:_this.build_date,
							see_house_date:_this.date,
							house_renovation:_this.house_renovation,
							house_del:_this.textarea,
							check_service:_this.check_service,
							house_img_url:_this.house_img_url
						}).then(function(response) {
							if (response.data.errno === '0') {
								_this.snackbar = true;
								_this.message = response.data.errmsg;
								setTimeout(function() {
									location.reload()
								}, 1000);
								console.log(response.data.data)
							} else if (response.data.errno === '4101') {
								// 未登跳转到登录页面
								_this.$router.replace({
									path: "/login"
								});
							} else {
								// 保存失败提示信息
								_this.snackbar = true;
								_this.message = response.data.errmsg;
							}
						})
						.catch(function() {
							_this.message = "连接服务器失败！";
						});
				}
			},
			// reset() {
			// 	this.$refs.form.reset()
			// },
			// resetValidation() {
			// 	this.$refs.form.resetValidation()
			// },
			handleFile(e) {
				let $target = e.target || e.srcElement
				let file = $target.files[0]
				// var reader = new FileReader()
				// reader.onload = (data) => {
				// 	let res = data.target || data.srcElement
				// 	this.userInfo.avatar = res.result
				// }
				// reader.readAsDataURL(file)
				let data = new FormData()
				data.append('image_file', file)
				this.house_image = file
				let _this = this;
				axios
					.post("/api/v1.0/users/avatar", data, {
						headers: {
							'Content-Type': 'multipart/form-data',
						},
					})
					.then(function(response) {
						if (response.data.errno == '0') {
							// 保存头像成功提示信息 把每一条数据都存在house_img_url数组中
							_this.house_img_url.push({
								image_url: response.data.data.image_url
							})
							_this.delete_show = true;
							console.log(_this.house_img_url)
						} else if (response.data.errno === '4101') {
							// 未登跳转到登录页面
							_this.$router.replace({
								path: "/login"
							});
						} else {
							console.log(response.data)
						}
					})
					.catch(function() {
						_this.message = "连接服务器失败！";
					});
			},
			clear_img(){
				this.house_img_url = [];
				this.delete_show = false;
			}
		},
		mounted() {
			var _this = this;
			// 加载出数据库中的设备信息
			axios
				.get("/api/v1.0/house/get_facility")
				.then(function(response) {
					if (response.data.errno === '0') {
						_this.service_item = response.data.data;
						console.log(_this.service_item);
					}
				})
				.catch(function() {
					_this.message = "连接服务器失败！";
				});

		}
	};
</script>

<style scoped>
</style>
<style>
	.el-input__inner {
		border: 1px solid #c0c4cc;
		background-color: inherit !important;
	}

	.file_ht {
		border: 0;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		margin-right: -15px;
		margin-left: 62px;
		font-weight: 700;
	}

	.uploadDIv {
		width: 78px;
		height: 81px;
		background-color: #edf0f2;
		font-size: 28px;
		color: #bfbfbf;
		text-align: center;
		line-height: 81px;
		float: left;
		position: relative;
	}

	.uploadDIv:hover {
		background-color: #e2e2e2;
		border: 1px solid #d0cfcf;
		color: #444;
		text-decoration: none;
	}

	.uploadDIv input {
		width: 78px;
		height: 78px;
		opacity: 0;
		position: absolute;
		right: 0px;
		top: 0px;
		z-index: 4;
		padding: 0;
	}
</style>
